<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p>商家列表</p>
    </header>

    <!-- 商家列表部分 -->
    <ul class="business">
      <li
          v-for="(business, index) in businesses"
          :key="index"
          class="business-item"
          @click="goToBusinessInfo(business.id)"
      >
        <div class="business-img">
          <img :src="business.image" :alt="business.name">
          <div v-if="business.quantity" class="business-img-quantity">
            {{ business.quantity }}
          </div>
        </div>
        <div class="business-info">
          <h3>{{ business.name }}</h3>
          <p>&#165;{{ business.minPrice }}起送 | &#165;{{ business.deliveryFee }}配送</p>
          <p>{{ business.description }}</p>
        </div>
      </li>
    </ul>

    <!-- 底部菜单部分 -->
    <FooterNav />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import FooterNav from '@/components/FooterNav.vue';

interface Business {
  id: number;
  name: string;
  minPrice: number;
  deliveryFee: number;
  description: string;
  image: string;
  quantity?: number;
}

const router = useRouter();

// 商家列表数据
const businesses = ref<Business[]>([
  {
    id: 1,
    name: "万家饺子（软件园E18店）",
    minPrice: 15,
    deliveryFee: 3,
    description: "各种饺子炒菜",
    image: "/img/sj01.png",
    quantity: 3
  },
  {
    id: 2,
    name: "小锅饭豆腐馆（全运店）",
    minPrice: 15,
    deliveryFee: 3,
    description: "特色美食",
    image: "/img/sj02.png",
    quantity: 2
  },
  {
    id: 3,
    name: "麦当劳麦乐送（全运路店）",
    minPrice: 15,
    deliveryFee: 3,
    description: "汉堡薯条",
    image: "/img/sj03.png",
    quantity: 1
  },
  {
    id: 4,
    name: "米村拌饭（浑南店）",
    minPrice: 15,
    deliveryFee: 3,
    description: "各种炒菜拌饭",
    image: "/img/sj04.png"
  },
  {
    id: 5,
    name: "申记串道（中海康城店）",
    minPrice: 15,
    deliveryFee: 3,
    description: "烤串炸串",
    image: "/img/sj05.png"
  },
  {
    id: 6,
    name: "半亩良田排骨米饭",
    minPrice: 15,
    deliveryFee: 3,
    description: "排骨米饭套餐",
    image: "/img/sj06.png"
  },
  {
    id: 7,
    name: "茶兮鲜果饮品（国际软件园店）",
    minPrice: 15,
    deliveryFee: 3,
    description: "甜品饮品",
    image: "/img/sj07.png"
  },
  {
    id: 8,
    name: "唯一水果捞（软件园E18店）",
    minPrice: 15,
    deliveryFee: 3,
    description: "新鲜水果",
    image: "/img/sj08.png"
  },
  {
    id: 9,
    name: "满园春饼（全运路店）",
    minPrice: 15,
    deliveryFee: 3,
    description: "各种春饼",
    image: "/img/sj09.png"
  }
]);

// 跳转到商家信息页面
const goToBusinessInfo = (businessId: number) => {
  router.push({ name: 'businessInfo', params: { id: businessId } });
};

// 跳转到其他页面
</script>

<style scoped>
/* 总容器 */
.wrapper {
  width: 100%;
  height: 100%;
  padding-bottom: 14vw; /* 为底部菜单留出空间 */
}

/* header部分 */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  color: #fff;
  font-size: 4.8vw;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 商家列表部分 */
.business {
  width: 100%;
  margin-top: 12vw;
  margin-bottom: 14vw;
}

.business-item {
  width: 100%;
  box-sizing: border-box;
  padding: 2.5vw;
  border-bottom: solid 1px #DDD;
  user-select: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.business-img {
  position: relative;
}

.business-img img {
  width: 20vw;
  height: 20vw;
}

.business-img-quantity {
  width: 5vw;
  height: 5vw;
  background-color: red;
  color: #fff;
  font-size: 3.6vw;
  border-radius: 2.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: -1.5vw;
  top: -1.5vw;
}

.business-info {
  margin-left: 3vw;
}

.business-info h3 {
  font-size: 3.8vw;
  color: #555;
}

.business-info p {
  font-size: 3vw;
  color: #888;
  margin-top: 2vw;
}

.footer-item p {
  font-size: 2.8vw;
}

.footer-item i {
  font-size: 5vw;
}
</style>
